<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/app.css" />
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view" id="topic_list"></ul>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/zepto.min.js"></script>
		<script src="../js/common.js"></script>
		<script>
			var index;
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			mui.plusReady(function(){
				//获得主页面webview引用；
				index = plus.webview.currentWebview().opener();
				if(isLogin()) {
					mui.fire(index, "hideLogout");
					mui.fire(index, "showCreateTopic");
				}
			});
			var p = 1;
			function pulldownRefresh() {
				$.ajax({
					type: "get",
					url: _baseUrl + "/api/index",
					data: {
						p: "1",
						size: "20",
						tab: "gs"
					},
					async: true,
					dataType: "json",
					success: function(data) {
						p = 2;
						var topic_list = $("#topic_list");
						topic_list.html("");
						$.each(data.detail.list, function(index, _data) {
							var span = getTopicTab(_data);
							var in_time = formatDateTime(_data.in_time);
							var html = '<li class="mui-table-view-cell mui-media">' +
								'<a href="javascript:topic_detail(\'' + _data.id + '\');">' +
								'<img class="mui-media-object mui-pull-left" src="' + _data.avatar + '">' +
								'<div class="mui-media-body">' +
								'<p class="topic-title">' + _data.title + '</p>' +
								'<p class="mui-ellipsis">' +
								'<span class="mui-badge mui-badge-green">' + span + '</span>&nbsp;' +
								'<span class="mui-badge mui-badge-blue">' + _data.reply_count + '</span>' +
								'<span class="topic-time">' + in_time + '</span>' +
								'</p>' +
								'</div>' +
								'</a>' +
								'</li>';
							topic_list.append(html);
						});
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
						mui('#pullrefresh').pullRefresh().refresh(true);
					}
				});
			}

			function pullupRefresh() {
				mui.ajax({
					type: "get",
					url: _baseUrl + "/api/index",
					data: {
						p: p,
						size: "20",
						tab: "gs"
					},
					async: true,
					dataType: "json",
					success: function(data) {
						p++;
						mui('#pullrefresh').pullRefresh().endPullupToRefresh((p > data.detail.totalPage)); //参数为true代表没有更多数据了。
						var topic_list = $("#topic_list");
						$.each(data.detail.list, function(index, _data) {
							var span = getTopicTab(_data);
							var in_time = formatDateTime(_data.in_time);
							var html = '<li class="mui-table-view-cell mui-media">' +
								'<a href="javascript:topic_detail(\'' + _data.id + '\');">' +
								'<img class="mui-media-object mui-pull-left" src="' + _data.avatar + '">' +
								'<div class="mui-media-body">' +
								'<p class="topic-title">' + _data.title + '</p>' +
								'<p class="mui-ellipsis">' +
								'<span class="mui-badge mui-badge-green">' + span + '</span>&nbsp;' +
								'<span class="mui-badge mui-badge-blue">' + _data.reply_count + '</span>' +
								'<span class="topic-time">' + in_time + '</span>' +
								'</p>' +
								'</div>' +
								'</a>' +
								'</li>';
							topic_list.append(html);
						});
					}
				});
			}
			if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 500);
				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}
		</script>
	</body>

</html>